<template>
  <div class="bock">
    <div class="bockDiv">
      <div class="bockTitle">重置密码</div>
      <el-steps
        :active="active"
        finish-status="success"
        align-center
        class="steps"
      >
        <el-step title="验证身份"></el-step>
        <el-step title="设置密码"></el-step>
        <el-step title="重置成功" :status="status"></el-step>
      </el-steps>
      <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        <div class="bockInput">
          <div v-if="active == '0'">
            <el-form-item label="用户名" prop="name">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="name2">
              <el-input v-model="form.name2"></el-input>
            </el-form-item>
            <el-form-item label="身份证号" prop="name3">
              <el-input v-model="form.name3"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="name4">
              <el-input v-model="form.name4"></el-input>
            </el-form-item>
          </div>
          <div v-if="active == '1'">
            <el-form-item label="新密码" prop="name5">
              <el-input v-model="form.name5"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="name6">
              <el-input v-model="form.name6"></el-input>
            </el-form-item>
          </div>
          <div v-show="active == '2'">
            <img src="../../assets/success.png" alt="">
          </div>
        </div>

        <div class="bockBtn" >
          <el-button @click="next" v-if="active != '2'">下一步</el-button>
           <el-button v-if="active == '2'">完成</el-button>
        </div>
        
      </el-form>
    </div>
  </div>
</template>
<script>
import validators from "@/utils/rule.js";
export default {
  data() {
    return {
      active: 0,
      status: "",
      form: {
        name: "",
        name2: "",
        name3: "",
        name4: "",
      },
      rules: {
        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        name2: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        name3: [{ required: true, message: "请输入身份证号", trigger: "blur" }],
        name4: [
          { required: true, validator: validators.isPhone, trigger: "blur" },
        ],
        name5: [{ required: true, message: "请输入新密码", trigger: "blur" }],
        name6: [
          { required: true, message: "请再次输入新密码", trigger: "blur" },
        ],
      },
    };
  },

  methods: {
    next() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.active++;
          //   if (this.active++ > 2) this.active = 0;
        } else {
          return false;
        }
      });

      // if (this.active == 2) {
      //   this.status = "error";
      // } else {
      //   this.status = "";
      // }
    },
  },
};
</script>

<style  scoped>
.bock {
    /* height: 600px; */
  display: flex;
  justify-content: center;
  background-color: #fff;
}
.bockDiv {
  position: relative;
  width: 60%;
  margin: 4.5% 0;
}
.bockTitle {
  position: absolute;
  /* left: -20px; */
  font-family: PingFangSC-Semibold;
  font-size: 20px;
  color: #333333;
  font-weight: 600;
  margin-left: 80px;
}
.bockInput {
  width: 60%;
  margin: 0 auto;
  margin-top: 40px;
}
.bockBtn {
  width: 24%;
  margin: 0 auto;
  margin-top: 40px;
}
.steps {
  width: 100%;
  height: 35px;
  margin-top: 40px;
}
/deep/ .el-step {
  height: 100%;
}
/deep/ .el-step__line {
  background-color: rgba(0, 0, 0, 0.15);
  margin-right: 30px !important;
  margin-left: 105px !important;
  top: 50%;
  height: 1px;
}
/deep/ .el-step__icon {
  width: 35px;
  height: 35px;
  font-size: 16px;
  border: 1px solid;
}
/deep/ .el-step__icon-inner {
  font-weight: unset !important;
  line-height: -1px;
}
/deep/ .el-step__head.is-process {
  color: #0065ff;
  border-color: #0065ff;
}
/deep/ .el-step__head.is-success {
  color: #0065ff;
  border-color: #0065ff;
}
/deep/ .is-process .el-step__icon.is-text {
  background: #0065ff;
  color: #fff;
}
/deep/ .el-step__title.is-process {
  color: #0065ff;
}
/deep/ .el-step__title.is-success {
  color: #565656;
}
/deep/ .el-step__title {
  position: absolute;
  top: calc((100% - 35px) / 2);
  left: calc(50% + 25px);
}
/deep/ .el-step.is-horizontal .el-step__line {
  top: 18px;
}
/deep/ .el-input {
  border: none !important;
  border-radius: 3px !important;
}
/deep/ .el-input__inner {
  height: 40px !important;
  line-height: 40px !important;
  font-size: 16px !important;
  font-size: 16px !important;
  color: #999999 !important;
  border: 1px solid rgba(204, 204, 204, 1) !important;
}
/deep/ .el-button {
  border: 1px solid rgba(46, 107, 230, 1);
  border-radius: 3px;
  background-color: #2e6be6;
  color: #fff;
  width: 160px;
}
</style>




